import React from 'react';
import UserCenterPage from '../../components/UserCenterPage/UserCenterPage';
import MySpot from '../../components/MySpot/MySpot';
import AddMySpot from '../../components/AddMySpot/AddMySpot';
import { Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { changePageState, submitSpot } from '../../actions/actions';

class UserCenter extends React.Component {
    state = {
        page: 'index'
    }

    setUserCenterPage(page) {
        this.setState({
            page: page
        })
    }
    
    render() {
        return (
            <div>
                <UserCenterPage click={this.props.clickLeft} clickMySpot={this.setUserCenterPage.bind(this, 'my-spot')} />
                {this.state.page === 'my-spot' 
                    ? <MySpot mySpot={this.props.mySpot} click={this.setUserCenterPage.bind(this, 'index')} clickAddMySpot={this.setUserCenterPage.bind(this, 'add-my-spot')}/>
                    : null}
                {this.state.page === 'add-my-spot'
                    ? <AddMySpot mySpot={this.props.mySpot} click={this.setUserCenterPage.bind(this, 'my-spot')} submit={this.props.submit}/>
                    : null}
            </div>
        )
    }
}

const mapStateToProps = (state, ownProps = {}) => {
    return Object.assign({}, ownProps, {
        mySpot: state.userInfo.mySpot
    })
}

const mapDispatchToProps = (dispatch) => {
    return {
        clickLeft: () => {
            dispatch(changePageState({
                show: 'map'
            }));
        },
        submit: (spotInfo) => {
            dispatch(submitSpot({
                mySpot: spotInfo
            }));
            Toast.success('提交成功!', 1);
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(UserCenter);
